<template>
  <div class="qrcode_page">
    <van-nav-bar :title="itemObj.title + '的二维码'" left-arrow @click-left="$router.back()">
      <template #right>
<!--        <van-icon name="ellipsis" size="23" @click="show = true" />-->
      </template>
    </van-nav-bar>

<!--    <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" close-on-click-action @select="onSelect" />-->

    <div class="myQrCode">
      <qrcode-vue
        class="my_qr_code"
        :value="need_linkUrl_code"
        :size="size"
        v-if="isWeixin === 1"
        level="H"
      ></qrcode-vue>
      <QRcode v-else-if="isWeixin === 0" :url="itemObj.id" />
      <van-divider v-else-if="isWeixin === 0" :style="{color: '#1989fa', borderColor: '#1989fa', padding: '0 26px'}">
        {{ itemObj.title + '码' }}
      </van-divider>
    </div>
  </div>
</template>

<script>
import QRcode from './common/QRcode.vue'
import {Toast} from 'vant'
import {base_url} from '../../../constants/comUtils'
import QrcodeVue from 'qrcode.vue'
import {mapGetters} from 'vuex'

export default {
  name: 'rollCallQrCode',
  data() {
    return {
      itemObj: {},
      isWeixin: '',
      linkUrl_code: base_url,
      size: 330,
      qrcodeUrls: 'https://www.jinpin.love/#/qode',
      show: false,
      actions: [
        {id: '1', name: '保存二维码'},
        {id: '2', name: '复制链接'}
      ],
      ids: ''
    }
  },

  components: {
    QrcodeVue,
    QRcode
  },

  async created() {
    console.log(this.$route.query.data)
    // id:5(报到点名), 6(渠道来源)
    // 7(接送点名),8(到用企点名),9(分宿舍点名),10(培训点名), 11(合同协议),
    if (this.$route.query.itemObj) {
      this.itemObj = JSON.parse(this.$route.query.itemObj)
      this.ids = this.itemObj.id
    } else {
      this.$router.back()
    }
    //判断是否是微信浏览器的函数
    console.log(this.$route.query.itemObj)
    //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
    var ua = window.navigator.userAgent.toLowerCase()
    //通过正则表达式匹配ua中是否含有MicroMessenger字符串
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      this.isWeixin = 1
      console.log('weixin')
      console.log(this.isWeixin)
      return true
    } else {
      console.log('noweiixn')

      this.isWeixin = 1
      console.log(this.isWeixin)
      return false
    }
  },

  computed: {
    ...mapGetters(['allUserInfo']),

    need_linkUrl_code() {
      let res
      if (this.allUserInfo.id) {
        res = this.qrcodeUrls + `?qodeType=${this.ids}&job_id=${this.$route.query.job_id}`
      } else {
        res = this.linkUrl_code
      }
      return res
    }
  },

  methods: {
    onSelect(item, index) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      Toast(item.name)
    }
  }
}
</script>

<style lang="scss" scoped>
.qrcode_page {
  width: 100%;
  .myQrCode {
    box-sizing: border-box;
    padding: 20px 20px 0 20px;
    .my_qr_code {
      display: inline-block !important;
      width: 100%;
      text-align: center;
    }
    .tips {
      background-color: red;
      text-align: center;
    }
  }
}
</style>
